一文搞定vue3.0新特性

您所在的位置：网站首页 › retention risk的表格哪些人需要放进来 › 一文搞定vue3.0新特性

一文搞定vue3.0新特性

2023-11-11 21:28| 来源: 网络整理| 查看: 265

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

一.vue3常用函数的使用

setup 函数用法,可以代替Vue2中的data和method属性,直接把逻辑加在setup中

ref 函数在temlate中用的变量需要用ref包装下

return出去的数组和方法在模板中才可以使用

setup() { const girls = ref(["小红", "小英", "晓红"]); const selectGirl = ref(""); const selectGirlFun = (index) => { selectGirl.value = girls.value[index]; }; return { girls, selectGirl, selectGirlFun, }; }, reactive函数的用法,他的参数不是基本类型,而是一个object,这样就你不用在方法中写.value了,同时放回data就可以 setup() { const data = reactive({ girls: ["a", "b", "c"], selectGirl: "", selectGirlFun: (index) => { console.log(1111) data.selectGirl = data.girls[index]; }, }); return { data }; },

但是这样写,必须在template使用变量和方法的时候需要加上data.,这样显然是不符合我们开发的编码习惯的, 我们可以想到在return的时候将data解构使用...拓展运算符,但是这样解构后就成了普通变量,不再具有响应式的能力, 所以我们需要使用toRefs()函数

toRefs函数的用法 setup() { const data = reactive({ girls: ["a", "b", "c"], selectGirl: "", selectGirlFun: (index) => { console.log(1111) data.selectGirl = data.girls[index]; }, }); const refData = toRefs(data); return { ...refData, }; }

如何选择ref和reactive,两种方法都可以,他们都可以生成响应式对象,个人选择reactive

二.生命周期更新

对于vue的生命周期想必大家都非熟悉,在项目中非常常用

生命周期:伴随着生命周期，给用户使用的函数，操控生命周期，主要是操控钩子函数。

vue3的生命周期 setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method onBeforeMount() : 组件挂载到节点上之前执行的函数。 onMounted() : 组件挂载完成后执行的函数。 onBeforeUpdate(): 组件更新之前执行的函数。 onUpdated(): 组件更新完成之后执行的函数。 onBeforeUnmount(): 组件卸载之前执行的函数。 onUnmounted(): 组件卸载完成后执行的函数 onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。 onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。 onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。 vue3生命周期与vue2生命周期对比理解 Vue2--------------vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted activated -> onActivated deactivated -> onDeactivated errorCaptured -> onErrorCaptured

vue3的生命周期函数在使用前需要先引入

import { reactive, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, } from "vue"; setup() { onMounted(() => { console.log('mounted') }) onUpdated(() => { console.log('updated') }) onRenderTriggered((event) => { console.log(event) }) } onRenderTracked 和onRenderTriggered 钩子函数的使用

onRenderTracked =>状态跟踪,他会跟踪页面上所有响应式变量和方法的状态,也就是我们return出去的值, 只要页面有update的情况,他就会跟踪,然后生成一个event对象,我们可以通过event对象来查找程序所存在的问题同样需要先引入

import { .... ,onRenderTracked,} from "vue";

再在setup函数中使用

onRenderTracked((event) => { console.log("状态跟踪组件----------->"); console.log(event); });

onRenderTriggered=> 状态触发,不会跟踪每一个值,而是给你变化值的信息,并且新值和旧值都会明确的展示出来如果把onRenderTracked是每个值都追踪,而onRenderTriggered是精准追踪,进行针对性调试使用时我们同样需要导入

import { .... ,onRenderTriggered,} from "vue"; onRenderTriggered((event) => { console.log("状态触发组件--------------->"); console.log(event); }); - key 那边变量发生了变化 - newValue 更新后变量的值 - oldValue 更新前变量的值 - target 目前页面中的响应变量和函数

这样看来onRenderTriggered跟watch有一丝丝像watch

【本文地址】

一文搞定vue3.0新特性

一文搞定vue3.0新特性

今日新闻

推荐新闻